<template>
  <div class="PayingBill">
    <Header title="我的订单"></Header>
    <div style="padding:31px 6px 0 6px">
      <div style="background: #fff;padding: 0px 12px;margin-top: 12px;border-radius: 3px">
        <div style="display: flex;padding: 10px 4px;border-bottom:1px #F8FAF9 solid ;">
          <div style="flex: 1;text-align: left;font-size: 15px">店铺名称</div>
          <div class="shopname">{{startinfo.shopname}}</div>
        </div>
        <div style="padding: 10px 4px;border-bottom:1px #F8FAF9 solid;">
          <div style="text-align: left;font-size: 15px">
            座位信息
          </div>
          <div style="padding: 8px 0;display: flex;flex-wrap:wrap">
            <div class="seat_info" v-for="_item in JSON.parse(startinfo.setlist)">{{_item.name}}</div>
          </div>
        </div>
        <div style="display: flex;padding: 10px 4px;border-bottom:1px #F8FAF9 solid">
          <div style="flex: 1;text-align: left;font-size:15px">到店时间</div>
          <div class="_sssa">{{startinfo.time}}</div>
        </div>
        <div style="display: flex;padding: 10px 4px">
          <div style="flex: 1;text-align: left;font-size:15px">结账时间</div>
          <div class="_sssa">{{endTime}}</div>
        </div>
      </div>
      <div style="padding: 15px 15px 3px 15px;font-size: 16px">暂停情况</div>
      <div
        style="height: 72px;display: flex;align-items:center;background: #fff;border-radius: 3px;border-bottom:1px #F8FAF9 solid"
        v-for="item in JSON.parse(startinfo.setlist)">
        <div style="flex: 1;text-align: left;position: relative;padding-left: 45px"><img
          src="static/icon/home_icon_yellow@3x.png" alt=""
          style="width: 20px;position: absolute;left:16px;top: 1px;">{{item.name}}
        </div>
        <div class="_ssa">
          <div v-if="item.pauseTime">暂停时间 {{item.pauseTime}}</div>
          <div v-if="item.resumeTime">继续时间 {{item.resumeTime}}</div>
        </div>
      </div>
      <div class="SettleAccounts">小计 <span>￥{{startinfo.paymoney}}</span></div>
      <div class="Pay" @click="Pay">确认支付￥{{startinfo.paymoney}}</div>
    </div>
    <confirm v-model="show" @on-confirm="payingend" :show-cancel-button="false">
      <img src="static/icon/order_pop_icon_success@3x.png" style="width: 60px" alt="">
      <p style="text-align:center;">订单确认成功</p>
    </confirm>
    <confirm v-model="show2" @on-confirm="ChargeMoney">
      <img src="static/icon/pop_icon_!@3x.png" style="width: 60px" alt="">
      <p style="text-align:center;">余额不足,请充值?</p>
    </confirm>

  </div>
</template>

<script>
  import Vue from 'vue'
  import {Confirm} from 'vux'
  import Header from './../Header'
  import moment from 'moment'
  import {Confirms} from '../../api/mine'

  export default {
    name: 'PayingBill',
    data() {
      return {
        list: [{
          name: '连排一座',
          ispause: false
        }, {
          name: '连排二座',
          ispause: true
        }],
        show: false,
        show2: false,
        startinfo: {},
        endTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
      }
    },
    created() {
      this.startinfo = this.$route.query
    },
    methods: {
      Pay() {
        Confirms({
          orderId: this.startinfo.orderid
        }).then(res => {
          if (res.data.status == 'success') {
            this.show = true
          } else {
            Vue.$vux.toast.text(res.data.msg, 'bottom')
          }
        })
        // this.show2 = true
      },
      payingend() {
        this.show = false
        this.$router.push({
          path: `/Seat`
        })
      },
      ChargeMoney() {
        this.show2 = false
        this.$router.push({
          path: `/Mine/Recharge`
        })
      }
    },
    components: {
      Header,
      Confirm
    },
  }
</script>

<style lang="less" type="text/less">
  .PayingBill {
    color: @font-color;
    font-size: 14px;
    .shopname {
      color: @common-color;
      flex: 2;
      text-align: right;
      font-size: 15px;
    }
    ._ssa {
      flex: 2;
      padding-right: 12px;
      position: relative;
      font-size: 12px;
      text-align: right;
      color: #979797;
    }
    ._sssa {
      flex: 2;
      text-align: right;
      color: #979797;
    }
    .seat_info {
      font-size: 12px;
      padding: 4px 14px;
      width: 60px;
      text-align: center;
      margin: 4px;
      border-radius: 3px;
      box-shadow: 0px -2px 0px 0px #FAFAFA,
      -2px 0px 0px 0px #FAFAFA,
      2px 0px 0px 0px #FAFAFA,
      0px 2px 0px 0px #FAFAFA;
    }
    .SettleAccounts {
      padding: 18px 12px;
      font-size: 16px;
      & > span {
        color: @common-color;
      }
    }
    .Pay {
      height: 42px;
      line-height: 42px;
      text-align: center;
      border-radius: 42px;
      background: @common-color;
      color: #fff;
      font-size: 16px;
      width: calc(100% - 30px);
      margin-left: 15px;
    }

  }
</style>
